<template>
  <div class="example">
    <header class="formHeader">
      <el-form :inline="true" :model="formData" :rules="rules" ref="elFormRef">
        <el-form-item label="日期" prop="date">
          <el-input v-model="formData.date" placeholder="日期..." />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="姓名..." />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="formData.address" placeholder="地址..." />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="formData.state" placeholder="状态...">
            <el-option label="进行中" value="open" />
            <el-option label="已关闭" value="close" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="default" @click="resetFrom(elFormRef)">重置</el-button>
        <el-button type="primary" @click="onSubmit(elFormRef)">查询</el-button>
      </div>
    </header>

    <div class="table">
      <div class="btns">
        <el-button type="primary" :icon="Plus">新增</el-button>
      </div>

      <el-table class="elTable" :data="tableData" border height="55vh" >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="state" label="状态" width="140" />
        <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small">编辑</el-button>
          <el-button size="small" type="danger">删除</el-button>
        </template>
      </el-table-column>
      </el-table>

      <div class="pagination-block">
        <el-pagination
          v-model:currentPage="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <DownloadVuePage :file="file" fileName="example" />
    <ViewPageCode :file="file" />

  </div>
</template>

<script lang="ts" setup>
import { ref,reactive  } from 'vue';
import file from "./example.vue?raw";
import type { FormInstance, FormRules } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import TestComp from './test.vue';
/** state */
const formData = reactive({
  name: '',
  address: '',
  state: '',
  date: '',
})
const elFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input', trigger: 'blur' },
  ],
  address: [
    { required: true, message: 'Please input', trigger: 'blur' },
  ],
  state: [
    { required: true, message: 'Please input', trigger: 'blur' },
  ],
  date: [
    { required: true, message: 'Please input', trigger: 'blur' },
  ],
})

const tableData:any[] = []
for(let i=0;i<50;i++){
  tableData.push({
    date: '2022-05-03',
    name: 'Tom'+(i+1),
    address: `广东省 广州市 番禺区 XXX镇${i+1}号`,
    state:i % 2
  })
}
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

/** methods */

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const onSubmit = async(formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
const resetFrom =(formEl: FormInstance | undefined) =>{
  // console.log(formEl)
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style lang="less" scoped>

.example{
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;

  .formHeader{
    background-color: #fff;
    padding: 20px;

    .btns{
      display: flex;
      justify-content: end;
      width:100%;
    }
  }

  .table{
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
    flex: 1;

    .btns{
      display: flex;
      width:100%;
      margin-bottom: 20px;
    }
    .elTable{
      // height: 550px;
      // overflow: auto;
    }
    .pagination-block{
      background-color: #fff;
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

</style>